<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- <p> {{msg.substr(0,1).toUpperCase()+msg.substr(1)}}</p> -->

        <!-- 使用计算属性 -->
        <p>{{newStrComputed}}</p>
        <p>{{newStrComputed}}</p>
        <hr />
        <!-- 使用methods -->
        <p>{{newStrMethod()}}</p>
        <p>{{newStrMethod()}}</p>
    </div>
</body>

</html>
<script>
    //  vue 中计算属性呢
    // 为什么使用计算属性: 模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护
    // 使用计算属性实现字符串的奇数位字母大写

    // 计算属性语法结构: 
    // computed: {
    //     计算属性名(){
    //         // 逻辑处理
    //         return 计算属性值
    //     }
    // }

    // 计算属性使用 
    // 计算属性 使用时,把他作为一个属性去使用, 和data中的属性的使用一致,
    // 因为计算属性也是属性,只不过结构写法是函数的使用,但是计算属性的值就是该函数结构的return 的返回值

    // 注意:计算属性必须有return 返回值,否则就没有值了,值为undefined
    // 注意点: 计算属性当依赖的数据发生变化,(该数据一般来源于data 中的响应式的数据),计算属性就会重新计算, 


    // 比较计算属性和methods 方法区别?
    // 第一点: 计算属性必须有return,方法可以不用写return 
    // 第二点: 计算属性有缓存, 而方法没有缓存, 计算属性当依赖的数据没有发生变化的时候,如果还需要计算的值,
    // 就会从缓存中获取上一次的计算属性的结果, 给计算属性赋值, 而 methods 不是,每次都会重新执行
    // 所以计算属性性能更高,对浏览器的性能开销更小


    const app = Vue.createApp({
        data() {
            return {
                msg: 'abcdefg'
            }
        },
        computed: {
            // 
            newStrComputed() {
                console.log('计算属性');
                let str = '';
                this.msg.split('').forEach((item, index) => {
                    if (index % 2 == 0) {
                        str += item.toUpperCase()
                    } else {
                        str += item
                    }
                })
                return str
            }
        },
        methods: {
            newStrMethod() {
                console.log("methods方法");
                let str = '';
                this.msg.split('').forEach((item, index) => {
                    if (index % 2 == 0) {
                        str += item.toUpperCase()
                    } else {
                        str += item
                    }
                })
                return str
            }

        }
    }).mount('#app')



</script>